<template>
  <li>
    <div class="bdline">
      <v-layout wrap>
        <span v-if="isFolder" :class="{bold: isFolder}">{{ open ? '-' : '+' }}</span>
        <v-flex xs6 sm4 md2 class="treeStyle" v-for="(value) in colums" :key="value.id" @click="toggle">{{model[value.value]}}</v-flex>
        <v-icon fab  medium class="mr-3 roundIcon" @click="openProjectEdit(model)">edit</v-icon>
        <v-icon medium v-if="!model.parent" class="mr-3" @click="showSvg(model.id)">insert_photo</v-icon>
        <v-icon color="error" medium v-if="model.status_code !== 4 && model.status_code !== 3" class="mr-3" @click="initHost(model.id)">play_arrow</v-icon>
        <v-icon medium v-if="model.status_code == 3" class="mr-3" @click="saltInfo(model.id)">message</v-icon>
      </v-layout>
    </div>
    <ul v-show="open" v-if="isFolder">
      <tree class="item" v-for="(model, index) in model.zi_sun" :key="index" :model="model" :colums="colums"></tree>
    </ul>
  </li>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('listproject')
export default {
  name: 'tree',
  data: function () {
    return {
      open: true
    }
  },
  props: {
    model: Object,
    colums: Array
  },
  computed: {
    isFolder: function () {
      return this.model.zi_sun &&
        this.model.zi_sun.length
    }
  },
  methods: {
    toggle: function () {
      if (this.isFolder) {
        this.open = !this.open
      }
    },
    ...mapActions({
      openProjectEdit: 'openProjectEdit',
      showSvg: 'showSvg',
      saltInfo: 'saltInfo',
      initHost: 'initHost'
    })
  }
}
</script>

<style scoped>
li {
  list-style:none;
}
div {
  cursor: pointer;
  padding-left: 10px;
}
.bold {
  font-weight: bold;
}
.treeStyle{
  text-align: left;
  line-height: 40px;
}
.bdline {
  border-bottom: 1px solid rgba(0,0,0,.12);
}
</style>
